<template>
    <a-modal title="推送领导" centered v-model:visible="visible" :width="500">
        <flexbox style="width: 100%">
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="选择领导" name="empIds">
                            <div style="width: 300px">
                                <HSearchMultiSelectCell
                                    style="width: 100%"
                                    :default-value="list"
                                    type="role"
                                    label="name"
                                    valueLabelField="name"
                                    keyField="userId"
                                    :searchQuery="{ position: '领导' }"
                                    @success="handleSelectChange"
                                />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </flexbox>
        <template #footer>
            <flexbox justify="flex-end" class="btn-group">
                <a-button type="primary" @click="handleSave">发送</a-button>
            </flexbox>
        </template>
    </a-modal>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import api from '@/api';
import { useMessage } from '@/hooks/common/useMessage';
import { HSearchMultiSelectCell } from '@/components';
import { defineComponent, ref, unref, toRefs, onDeactivated, reactive } from 'vue';
export default defineComponent({
    components: {
        HSearchMultiSelectCell
    },
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const rules = {
            empIds: [{ required: true, message: '领导不能为空', trigger: 'change' }]
        };
        const state = reactive<any>({
            visible: false,
            id: null,
            list: [],
            form: {
                empIds: [],
                empNames: [],
                devType: ''
            },
            detail: {}
        });
        const open = async (id, devType) => {
            state.id = id;
            state.list = [];
            state.form.empIds = '';
            state.form.empNames = '';
            state.visible = true;
            state.form.devType = devType;
        };
        const handleSave = async () => {
            const res = await unref(ruleFormRef).validate();
            if (!res) {
                return;
            }
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认信息无误，推送报告至${state.form.empNames}？`,
                iconType: 'warning',
                onOk: async () => {
                    const formData = new FormData();
                    formData.append('id', state.id);
                    formData.append('pushEmpId', state.form.empIds);
                    formData.append('devType', state.form.devType);
                    const { success, errorMsg } = await api.versionStatisticsModel.sendOA(formData);
                    if (success) {
                        message.success('操作成功');
                        state.visible = false;
                        emit('success');
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        const handleSelectChange = (val) => {
            state.list = [...val];
            if (val.length) {
                state.form.empIds = state.list.map((item) => item.userId).join(',');
                state.form.empNames = state.list.map((item) => item.name).join('、');
            } else {
                state.form.empIds = '';
                state.form.empNames = '';
            }
        };
        // 销毁时关闭弹窗
        onDeactivated(() => {
            state.visible = false;
        });
        return {
            rules,
            ruleFormRef,
            ...toRefs(state),
            open,
            handleSave,
            handleSelectChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
    }
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
}
</style>